<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-26
    	描述：Bezier二次曲线
    	QuadraticCurveTo
    	定义和用法
		quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
		提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。
		如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
		  JavaScript 语法：
		     context.moveTo(x0,y0);//初始点
			context.quadraticCurveTo(cpx,cpy,x,y);
			参数值			参数	描述
			
			cpx				贝塞尔控制点的 x 坐标
			cpy				贝塞尔控制点的 y 坐标      
			x				结束点的 x 坐标
			y				结束点的 y 坐标 
		   
		   
		    -->
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
		</canvas>
	</body>
	<script>

		var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	
			//调用函数画出月亮
			fillMoon(context,400,200,150,30);

	
	//计算公式
		function dis(x1,y1,x2,y2){
			return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
		}
			
		
		//封装函数     绘制填充色的月亮
		function fillMoon(cxt,x,y,r,rot,/*optional可选的*/ fillColor){//环境，x y月亮的位置，r半径||大小，rot旋转角度，颜色
			cxt.save();
			cxt.translate(x,y);
			cxt.rotate(rot*Math.PI/180);
			cxt.scale(r,r);
			pathMoon(cxt);
			cxt.fillStyle=fillColor||"#fb5";
			cxt.fill();
			cxt.restore();

		}
	function pathMoon(cxt){//绘制月亮的轮廓
		cxt.beginPath();
		cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);//0,0为圆心1为半径,0.5π到1.5π逆时针绘制
		cxt.moveTo(0,-1);//移动当前点到0 -1
	//	cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
	    cxt.quadraticCurveTo(1.2,0,0,1);//控制点1.2 0  终止点 0  1    （只能通过这控制满度||第一个参数越大越弯）
		cxt.closePath();
		
	}
			
			
	</script>
</html>
